{{- extends "layout/default" }}
{{- import "blocks/pagination" }}
{{- block body() }}

<!-- Prefetch links -->
{*
<link rel="prefetch" href="/users/{{ .User.ID }}/novels">
*}

{{- baseURL := "/users/" + .User.ID }}

<div class="row justify-content-center g-4">
  <div class="col-12 col-lg-9">
    <div class="custom-card">
      <div class="custom-card-body bg-charcoal-surface1 p-4">
        <div class="row g-4">
          <div class="col-12 col-md-4">
            <!-- Cover art -->
            <a href="{{baseURL}}/series/{{ .MangaSeriesContent.SeriesID }}">
              <img src="{{ .MangaSeriesContent.Brief.Thumbnail }}" alt="{{ .Title }}" class="d-block img-fluid rounded mx-auto" />
            </a>
          </div>
          <div class="col-12 col-md-8 d-flex flex-column">
            <h3 class="text-body-secondary mb-2">
                Series of {{ .MangaSeriesContent.Total }} works
            </h3>

            <!-- Title -->
            <h1 class="mb-2">{{ .Title }}</h1>

            <!-- Author -->
            <div class="d-flex align-items-center mb-2">
              <a href="{{baseURL}}/novels" class="text-decoration-none">
                <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle me-2" style="width: 30px; height: 30px" />
              </a>
              <h4 class="mb-0">
                <a href="{{baseURL}}" class="text-body-secondary text-decoration-none">
                  {{ .User.Name }}
                </a>
              </h4>
            </div>

            {*
            <!-- Word count and reading time -->
            <p class="small text-body-secondary">
              <span>{{ .NovelSeries.PublishedTotalCharacterCount }} character(s)</span> &middot; <span>{{ floor: .NovelSeries.PublishedReadingTime / 60 }} mins</span>
            </p>
            *}

            <!-- View Pixiv original button -->
            <div class="d-flex">
              <a href="https://pixiv.net/user/{{.User.ID}}/series/{{ .MangaSeriesContent.SeriesID }}" class="custom-btn-secondary btn-sm mb-3">
                <i class="bi bi-box-arrow-up-right me-2"></i>View on pixiv.net
              </a>
            </div>

            <!-- Description -->
            <p>{{ raw: parsePixivRedirect(.MangaSeriesContent.Brief.Caption) }}</p>

            <!-- Metadata -->
            <div class="d-flex flex-wrap text-body-secondary small mb-3">
              <div class="me-3 mb-2 mb-lg-0">
                <i class="bi bi-book me-2"></i>{{ .MangaSeriesContent.Total }} episode(s)
              </div>
              {* TODO: Enabling this line triggers an error.
              <div class="me-3 mb-2 mb-lg-0">
                <i class="bi bi-calendar me-2"></i>Updated on {{parseTime: .MangaSeriesContent.Brief.UpdateDate }}
              </div>
              *}
            </div>

            <!-- Read first episode button -->
            <div class="mt-auto">
              <a href="/artworks/{{ .MangaSeriesContent.Brief.FirstIllustID }}" class="custom-btn-secondary">
                <i class="bi bi-book me-2"></i>Read first episode
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 mt-5">
    <h2>{{ .MangaSeriesContent.Total }} works in this series</h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
        {{- range .MangaSeriesContent.Series }}
            <div class="col">
                <div class="card h-100 border-0 bg-transparent">
                    {{ include "fragments/thumbnail-dt" .Brief }}
                    <div class="card-body py-2 px-0">
                        {{ include "fragments/thumbnail-tt" .Brief }}
                    </div>
                </div>
            </div>
        {{- end }}
    </div>
  </div>

  <!-- Pagination -->
  {{- url := baseURL + "/series/" + .MangaSeriesContent.SeriesID + "?p="}}
  {{- paginationData := createPaginator(url, "#checkpoint", .Page, .PageLimit, 1, 5) }}
  {{- yield pagination(data=paginationData) }}
</div>
{{- end }}
